웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
React 앱에서 인기있는 antd 라이브러리에서 checkbox와 radio 컴포넌트 사용 방법에 대하여 알아봅니다.
# react antd 컴포넌트 checkbox, radio
react에서는 매우 자주 사용되는 antd 라이브러리에서 checkbox와 radio 컴포넌트는 입력폼을 작성할 때 자주 사용됩니다. 먼저 간단한 사용 방법은 아래와 같습니다. 아래 예제는 Radio와 Checkbox를 각각 적용하였습니다.
! 체크 상태 on / off 적용하기
먼저 체크 상태를 표시하기 위해서 checked 프로퍼티를 아래와 같이 설정합니다.
<Checkbox checked={false} />
그리고 onChange를 사용하여 값이 변경된 경우 해당하는 함수를 호출하여 새로운 값으로 업데이트를 합니다.
import { Radio, Checkbox } from 'antd';
export default () => {
const onChangeCheckbox = function(e) {
const checked = e.target.checked;
if (checked ) {
...
}
else {
...
}
};
const onChangeRadio = function(e) {
const checked = e.target.checked;
if (checked ) {
...
}
else {
...
}
};
return (
<div>
<Checkbox
checked={false}
onChange={onChangeCheckbox} />
<Radio
checked={false}
onChange={onChangeRadio} />
</div>
)
};
export default () => {
const onChangeCheckbox = function(e) {
const checked = e.target.checked;
if (checked ) {
...
}
else {
...
}
};
const onChangeRadio = function(e) {
const checked = e.target.checked;
if (checked ) {
...
}
else {
...
}
};
return (
<div>
<Checkbox
checked={false}
onChange={onChangeCheckbox} />
<Radio
checked={false}
onChange={onChangeRadio} />
</div>
)
};
여기서 체크 여부를 확인하기 위해서 아래와 같은 코드를 사용했습니다.
const checked = e.target.checked;
e는 이벤트 객체이여 e.target.checked를 사용하여야 현재 체크 여부를 확인하여 boolean으로 반환합니다. 다시 말해 체크 여부를 확인하기 위해서는 e.target.checked를 사용하고 값을 가져올 경우 e.target.value를 사용하면 됩니다.
[ 참고 ]
참고로 Checkbox와 onChanged에 사용된 함수를 같이 사용하면 아래와 같습니다
<Checkbox onChange={(e = > checked = e.target.checked} />
아래는 Checkbox, Radio에서 사용 가능한 Props와 Methods입니다.
@ Props 정보
defaultChecked // <boolean> 체크박스의 초기값을 설정함
disabled // <boolean> Disabled 상태를 설정
checked // <boolean> 체크 상태를 결정함
indeterminate // <boolean> 전체 선택에서 주로 사용되는 일부 체크됨(모두 체크되지 않음)
autoFocus // <boolean> mounted 상태에 자동으로 포커스 됨
onChange // <function> 값이 변경될 때 콜백 호출
@ Methods 정보
blur() // focus에서 벗어나 blur 상태인 경우
focus() // blur와 반대로 focus될 경우
! Checkbox Group, Radio Group 알아보기
이번에는 Checkbox Group에 대하여 알아봅니다. Checkbox Group은 여러 개의 값을 각각 설정하지 않고 한 번에 선언하여 사용할 수 있습니다. 아래는 간단한 예제입니다.
<Checkbox.Group
options={['web', 'is', 'free', 'com']}
/>
options={['web', 'is', 'free', 'com']}
/>
options는 string의 값을 가지는 배열을 사용해야 합니다. 위 예제를 실행하면 web, is, free, com의 값을 가지는 네 개의 체크박스가 나타나게 됩니다.
아래는 체크박스 다음으로 Radio Group의 사용 예제입니다. Checkbox Group과 거의 동일합니다.
<Radio.Group
options={['인기순', '최신순']}
/>
<Radio.Group
optionType={'button'}
buttonStyle={'outline'}
defaultValue={'인기순'}
options={['인기순', '최신순']}
/>
options={['인기순', '최신순']}
/>
<Radio.Group
optionType={'button'}
buttonStyle={'outline'}
defaultValue={'인기순'}
options={['인기순', '최신순']}
/>
여기서 아래 예제의 경우 라디오 타입을 버튼처럼 사용한 예제입니다. 이와 같이 Radio를 버튼처럼 사용 가능한 optionType 설정이 가능합니다.
methods의 경우 위와 같이 blur(), focus()가 있습니다. 아래는 사용 가능한 props 정보입니다.
@ Checkbox Group Props
defaultChecked // <array[string]> 초기값을 설정함
disabled // <boolean> Disabled 상태를 설정
options // <array[string]> 사용할 값을 선언
value // <array[string]> 현재 선택된 값을 설정
name // <string> 자식 요소의 사용될 name 속성
onChange // <function> 값이 변경될 때 콜백 호출
아래는 추가로 Radio Group에서 사용할 수 있는 props입니다.
@ Radio Group Props
size // large, middle, small 값으로 버튼 크기를 선택함
optionType // default와 button 중 선택
buttonStyle // Button 타입의 스타일로 outline(default), solid 선택
! Radio Group 사용시 display 라벨과 값 따로 사용하기
추가로 저장할 값과 보이게 될 display 값(label)을 다르게 할 수 있습니다. 이 경우 options 내부의 배열값으로 객체를 사용해야 합니다. 이때 객체는 프로퍼티 label과 value를 각각 가지게됩니다.예를들어 만약 아래와 같이 보이는 라벨값은 '웹이즈'와 '프리'인 경우 실제 값은 'webis', 'free'를 사용할 수 있습니다.
<Radio.Group
options={
[
{
label: '웹이즈',
value: 'webis'
},
{
label: '프리',
value: 'free'
}
]
}
/>
options={
[
{
label: '웹이즈',
value: 'webis'
},
{
label: '프리',
value: 'free'
}
]
}
/>
이와 같이 사용하면 나중에 따로 값을 변경하지 않아도 되므로 매우 편리합니다.
여기까지 antd 라이브러리의 컴포넌트 Radio, Checkbox 그리고 그룹 사용 방법과 예제를 알아봤습니다.
아래의 글도 찾고 계시지 않나요?
